<ng-container *ngFor="let action of actions">
  <ng-container [ngSwitch]="action.type">
    <ng-template [ngSwitchCase]="'button'">
      <button mat-button
              [disabled]="isDisabled(action)"
              matTooltip="{{ action.tooltip | transloco }}"
              (click)="onButtonClick(action)">
        {{ action.text | transloco }}
      </button>
    </ng-template>
    <ng-template [ngSwitchCase]="'iconButton'">
      <button mat-icon-button
              [disabled]="isDisabled(action)"
              matTooltip="{{ action.tooltip | transloco }}"
              (click)="onButtonClick(action)">
        <mat-icon *ngIf="!action.hasBadge"
                  svgIcon="{{ action.icon }}">
        </mat-icon>
        <mat-icon *ngIf="['numDataItems'].includes(action.hasBadge)"
                  svgIcon="{{ action.icon }}"
                  [matBadge]="table.data?.length"
                  [matBadgeHidden]="!table.data?.length"
                  matBadgeColor="accent"
                  matBadgeOverlap="true"
                  matBadgeSize="small">
        </mat-icon>
        <mat-icon *ngIf="['numSelectedItems'].includes(action.hasBadge)"
                  svgIcon="{{ action.icon }}"
                  [matBadge]="selection.length"
                  [matBadgeHidden]="!selection.length"
                  matBadgeColor="accent"
                  matBadgeOverlap="true"
                  matBadgeSize="small">
        </mat-icon>
      </button>
    </ng-template>
    <ng-template [ngSwitchCase]="'menu'">
      <button mat-icon-button
              [disabled]="isDisabled(action)"
              matTooltip="{{ action.tooltip | transloco }}"
              [matMenuTriggerFor]="menu">
        <mat-icon svgIcon="{{ action.icon }}"></mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <ng-template matMenuContent>
          <button *ngFor="let action of action.actions"
                  mat-menu-item
                  [disabled]="isDisabled(action)"
                  matTooltip="{{ action.tooltip | transloco }}"
                  (click)="onButtonClick(action)">
            <mat-icon *ngIf="action.icon"
                      svgIcon="{{ action.icon }}">
            </mat-icon>
            <span>{{ action.text | transloco }}</span>
          </button>
        </ng-template>
      </mat-menu>
    </ng-template>
    <ng-template [ngSwitchCase]="'select'">
      <mat-form-field>
        <mat-label></mat-label>
        <mat-select [disabled]="isDisabled(action)"
                    placeholder="{{ action.placeholder | transloco }}"
                    (selectionChange)="onSelectionChange($event, action)">
          <mat-option *ngFor="let option of action.store.data"
                      [value]="option[action.valueField]">
            {{ option[action.textField] | transloco }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </ng-template>
    <ng-template [ngSwitchCase]="'divider'">
      <mat-divider vertical="true"></mat-divider>
    </ng-template>
  </ng-container>
</ng-container>
